<template>
	<view class="qrCode-box">
		<view class="content">
			<view class="top">
				<view class="member-code mb-35">
					<u-icon name="grid-fill" color="#886a3b" size="28" />
					<text class="ml-10" @click="openQuCode">会员码</text>
				</view>
				<view style="font-weight: 700;">
					会员码仅限本人使用
				</view>
			</view>
			<view class="code">
				<view class="qrimg">
					<tki-qrcode ref="qrcode" uni="px" :iconSize="45" :size="118 * 2" icon="/static/images/thlogo.png"
						:showLoading="false" val="https://oss.hntenghu.com/wuye/thlogo.png" />
					<view class="mt-20 mb-20" style="letter-spacing: 5rpx;">
						609414730610
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import tkiQrcode from "@/components/tki-qrcode/tki-qrcode.vue"
	export default {
		components: {
			tkiQrcode
		},
		data() {
			return {

			}
		},
		mounted() {
			this.$nextTick(function() {
				const refQR = this.$refs['qrcode']
				refQR._makeCode()
			})
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.qrCode-box {
		padding: 20rpx;

		.content {
			background-color: $-color-white;

			.top {
				background-color: #e2f0fd;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				padding: 50rpx 0;
				border-radius: 20rpx 20rpx 0 0;

				.member-code {
					width: 180rpx;
					height: 50rpx;
					line-height: 50rpx;
					background-color: #e7e7e7;
					border-radius: 50rpx;
					text-align: center;
				}
			}

			.qrimg {
				display: flex;
				justify-content: center;
				flex-direction: column;
				align-items: center;
				margin: 50rpx 0;
			}

		}
	}
</style>